<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* defineProperty   
                -创建一个可控的对象
                -修改一个对象
            Object.defineProperty()    
        */



        //一 创建一个可控的对象
        // var val = "张三";
        // var obj = Object.defineProperty({}, "name", {
        //     get: function () {
        //         console.log("get....");
        //         return val;
        //     },
        //     set: function (newvalue) {
        //         console.log("修改了", newvalue);
        //         if (val !== newvalue) {
        //             val = newvalue;
        //         }
        //     },
        //     configurable: true, // 配置 可配置
        //     enumerable: true //配置 可枚举

        // })
        // console.log(obj);
        // //获取name属性的值  调用get方法
        // obj.name;
        // // 修改对象name属性值 调用set方法
        // obj.name = "李四";
        // console.log(obj);




        //修改一个对象为可控制对象
        // var obj1 = {
        //     name: "张三",
        //     age: 20
        // }
        // //修改obj1里的age属性为可控属性
        // Object.defineProperty(obj1, "age", {
        //     get: function () {
        //         return 20;
        //     },
        //     set: function (newvalue) {
        //         console.log("set", newvalue);
        //     },
        //     enumerable: true,
        //     configurable: true
        // })



        /* 封装一个观察数据的函数 */
        var obj = {
            name: "王五",
            age: 20
        }

        function observe(obj) {
            for (var key in obj) {
                Object.defineProperty(obj, key, {
                    get: function () {
                        console.log("get");
                        return obj[key]
                    },
                    set: function (newvalue) {
                        if (obj[key] != newvalue) {
                            obj[key] = newvalue
                        }
                    },
                    configurable: true,
                    enumerable: true
                })
            }
        }
        observe(obj);
        
        console.log(obj);
    </script>
</body>

</html>